<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Tckapco">
    
    <title>
        
            JS基础——数据类型(一) |
        
        Tckapco
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"theboat.gitee.io","root":"/","language":"en"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Tckapco
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                LINKS
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">LINKS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">JS基础——数据类型(一)</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Tckapco</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-04-15 18:35:01</span>
        <span class="mobile">2021-04-15 18:35</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/JavaScript/JS%E5%9F%BA%E7%A1%80/">JS基础</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">数据类型</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.4k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>5 Mins</span>
        </span>
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="一、基本概念"><a href="#一、基本概念" class="headerlink" title="一、基本概念"></a>一、基本概念</h1><h2 id="1-类型分类？"><a href="#1-类型分类？" class="headerlink" title="1.类型分类？"></a>1.类型分类？</h2><p>js 一共有七种<strong>基本数据类型</strong>，分别是</p>
<ul>
<li><p>Undefined</p>
</li>
<li><p>Null</p>
</li>
<li><p>Boolean</p>
</li>
<li><p>Number</p>
</li>
<li><p>String</p>
</li>
<li><p>Symbol</p>
</li>
<li><p>BigInt</p>
</li>
</ul>
<p>Symbol是ES6新增的类型，代表创建后独一无二且不可变的数据类型，它的出现主要是为了解决可能出现的全局变量冲突的问题。<a href="../../../../2021/05/14/ES6-Symbol/index.html" target="_blank">详情可参考:ES6-Symbol</a></p>
<p> BigInt是ES10新增的类型。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。</p>
<p><strong>引用数据类型:</strong> </p>
<ul>
<li>普通对象-Object</li>
<li>函数对象-Function</li>
<li>数组对象-Array</li>
<li>正则对象-RegExp</li>
<li>日期对象-Date</li>
<li>数学函数-Math</li>
</ul>
<h2 id="2-null和undefined的区别"><a href="#2-null和undefined的区别" class="headerlink" title="2.null和undefined的区别"></a>2.null和undefined的区别</h2><p>首先 Undefined 和 Null 都是基本数据类型。</p>
<p><strong>undefined 代表的含义是未定义(值)，null 代表的含义是空对象</strong>。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。</p>
<p>undefined 在 js 中不是一个<strong>保留字</strong>，这意味着我们可以使用 undefined 来作为一个变量名，这样的做法是非常危险的，它会影响我们对 undefined 值的判断。但是我们可以通过一些方法获得安全的 undefined 值，比如说 <strong>void 0</strong>。</p>
<p>当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">typeof null &#x2F;&#x2F;  &#39;object&#39; </span><br></pre></td></tr></table></figure>

<p>这是一个历史遗留的问题，在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以将它错误的判断为 object 。</p>
<p>当我们使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。</p>
<p>参考《JavaScript 深入理解之 undefined 与 null》</p>
<p><a target="_blank" rel="noopener" href="http://cavszhouyou.top/JavaScript%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E4%B9%8Bundefined%E4%B8%8Enull.html">http://cavszhouyou.top/JavaScript%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E4%B9%8Bundefined%E4%B8%8Enull.html</a></p>
<h2 id="3-”666”-toString-为什么可以调用"><a href="#3-”666”-toString-为什么可以调用" class="headerlink" title="3.”666”.toString()为什么可以调用"></a>3.”666”.toString()为什么可以调用</h2><p><strong>基本包装类型：</strong></p>
<p>基本类型值不是对象，从逻辑上讲它们不应有方法。</p>
<p>但实际上当读取一个基本类型值时，后台会<strong>创建一个对应的基本包装类型的对象</strong></p>
<p>回到题目：</p>
<p>其实在这个语句运行的过程中做了这样几件事情：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> <span class="built_in">Object</span>(<span class="string">&#x27;666&#x27;</span>);</span><br><span class="line">s.toString();</span><br><span class="line">s = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

<p>第一步: 创建Object类实例。注意为什么不是String ？ 由于Symbol和BigInt的出现，对它们调用new都会报错，目前ES6规范也不建议用new来创建基本类型的包装类。</p>
<p>第二步: 调用实例方法。</p>
<p>第三步: 执行完方法立即销毁这个实例。</p>
<p>整个过程体现了<code>基本包装类型</code>的性质，而<strong>基本包装类型恰恰属于基本数据类型，包括Boolean, Number和String。</strong></p>
<blockquote>
<p>上面例子相当于隐式装箱，详情见JS基础——数据类型(二)</p>
</blockquote>
<h2 id="4-0-1-0-3-0-3？"><a href="#4-0-1-0-3-0-3？" class="headerlink" title="4.0.1+0.3 != 0.3？"></a>4.0.1+0.3 != 0.3？</h2><p>JS默认数字都是隐式采用IEEE 754<strong>二进制</strong>运算的</p>
<p>二进制只能精准表达<strong>2除尽的数字</strong>1/2, 1/4, 1/8，例如0.1(1/10)和0.2(1/5)，在二进制中都无法精准表示时，需要根据精度舍入。</p>
<p>我们人类熟悉的十进制运算系统，可以精准表达2和5除尽的数字，例如1/2, 1/4, 1/5(0.2), 1/8, 1/10(0.1)。</p>
<p>当然十进制也有无法除尽的地方，例如1/3, 1/7，也需要根据精度舍入。</p>
<p>因此0.1和0.2在转换成二进制后会无限循环，由于标准位数的限制后面多余的位数会被截掉，此时就已经出现了精度的损失，相加后因浮点数小数位的限制而截断的二进制数字在转换为十进制就会变成0.30000000000000004。</p>
<p><strong>如何使它相等？</strong></p>
<p>方法一：</p>
<p>乘倍数得到整数，再除以原来的倍数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(0.1*10+0.2*10)&#x2F;10 &#x3D;&#x3D;&#x3D;0.3</span><br></pre></td></tr></table></figure>

<p>方法二：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">parseFloat((0.1+0.2).toFixed(10)) &#x3D;&#x3D;&#x3D;0.3</span><br></pre></td></tr></table></figure>

<h1 id="二、判断方式"><a href="#二、判断方式" class="headerlink" title="二、判断方式"></a>二、判断方式</h1><h2 id="1-typeof"><a href="#1-typeof" class="headerlink" title="1.typeof"></a>1.typeof</h2><p>对于基本数据类型来说，除了 null 都可以调用typeof显示正确的类型</p>
<p>但对于引用数据类型，除了函数之外，都会显示”object”</p>
<p>因此采用typeof判断对象数据类型是不合适的，采用instanceof会更好，<strong>instanceof的原理是基于原型链的查询，只要处于原型链中，判断永远为true</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const Person &#x3D; function() &#123;&#125;</span><br><span class="line">const p1 &#x3D; new Person()</span><br><span class="line">p1 instanceof Person &#x2F;&#x2F; true</span><br><span class="line"></span><br><span class="line">var str1 &#x3D; &#39;hello world&#39;</span><br><span class="line">str1 instanceof String &#x2F;&#x2F; false</span><br><span class="line"></span><br><span class="line">var str2 &#x3D; new String(&#39;hello world&#39;)</span><br><span class="line">str2 instanceof String &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>

<h2 id="2-instance"><a href="#2-instance" class="headerlink" title="2.instance"></a>2.instance</h2><p>基于原型链上查找</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function myInstanceof(left, right) &#123;</span><br><span class="line">    &#x2F;&#x2F;基本数据类型直接返回false</span><br><span class="line">    if(typeof left !&#x3D;&#x3D; &#39;object&#39; || left &#x3D;&#x3D;&#x3D; null) return false;</span><br><span class="line">    &#x2F;&#x2F;getProtypeOf是Object对象自带的一个方法，能够拿到参数的原型对象</span><br><span class="line">    let proto &#x3D; Object.getPrototypeOf(left);</span><br><span class="line">    while(true) &#123;	</span><br><span class="line">        &#x2F;&#x2F;查找到尽头，还没找到</span><br><span class="line">        if(proto &#x3D;&#x3D; null) return false;</span><br><span class="line">        &#x2F;&#x2F;找到相同的原型对象</span><br><span class="line">        if(proto &#x3D;&#x3D; right.prototype) return true;</span><br><span class="line">        proto &#x3D; Object.getPrototypeOf(proto);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Object.getPrototypeOf获取实例对象的__ proto __属性，判断实例对象的原型是否等于构造函数的原型(prototype)</p>
</blockquote>
<p>Object.getPrototypeOf:</p>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf</a></p>
<p>缺点：未考虑传入function情况</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">#数据类型</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/05/08/JS%E5%9F%BA%E7%A1%80%E2%80%94%E2%80%94%E4%BD%9C%E7%94%A8%E5%9F%9F&amp;%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">JS基础——作用域&amp;作用域链</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Tckapco</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">一、基本概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%B1%BB%E5%9E%8B%E5%88%86%E7%B1%BB%EF%BC%9F"><span class="nav-number">1.1.</span> <span class="nav-text">1.类型分类？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-null%E5%92%8Cundefined%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.2.</span> <span class="nav-text">2.null和undefined的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E2%80%9D666%E2%80%9D-toString-%E4%B8%BA%E4%BB%80%E4%B9%88%E5%8F%AF%E4%BB%A5%E8%B0%83%E7%94%A8"><span class="nav-number">1.3.</span> <span class="nav-text">3.”666”.toString()为什么可以调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-0-1-0-3-0-3%EF%BC%9F"><span class="nav-number">1.4.</span> <span class="nav-text">4.0.1+0.3 !&#x3D; 0.3？</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%88%A4%E6%96%AD%E6%96%B9%E5%BC%8F"><span class="nav-number">2.</span> <span class="nav-text">二、判断方式</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-typeof"><span class="nav-number">2.1.</span> <span class="nav-text">1.typeof</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-instance"><span class="nav-number">2.2.</span> <span class="nav-text">2.instance</span></a></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/toc.js"></script>
    
</div>



</body>
</html>
